<template>
  <ManageLayout>
    <template #header-left>
      <h3>分类列表</h3>
    </template>
    <template #header-right>
      <div class="flex items-center space-x-1">
        <n-input v-model:value="keyword" @keydown.enter.stop="handleSearch">
          <template #prefix>
            <TextIcon icon="mdi:search"></TextIcon>
          </template>
        </n-input>
      </div>
    </template>
    <div class="h-full flex flex-col ">
      <CurdTable ref="tableRef"
                 :columns="columns"
                 :and-params="andParams"
                 :or-params="orParams"
                 :order-params="orderParams"
                 :get-data="api.user.queryList"></CurdTable>
    </div>
  </ManageLayout>

</template>

<script setup lang="ts">

import api from "@/api";
import ManageLayout from "@/view/pc/manage/components/ManageLayout.vue";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import CurdTable from "@/components/pc/table/CurdTable.vue";
import {ref} from "vue";
import {h, nextTick, onMounted} from "vue";
import {NButton} from "naive-ui";
import RemoteAvatar from "@/components/pc/avatar/RemoteAvatar.vue";
import dayjs from "@/utils/dayjs";


const keyword = ref('')
const tableRef = ref()

const columns = ref([
  {title: 'ID', key: 'id', width: 1, ellipsis: {tooltip: true}, align: 'center',},
  {
    title: '头像', key: 'avatar', width: 1, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(RemoteAvatar, {src: row.avatar})
    }
  },
  {title: '用户名', key: 'username', width: 2, ellipsis: {tooltip: true}, align: 'center',},
  {
    title: '邮箱', key: 'email', width: 2, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return row.email ? row.email : '-'
    }
  },
  {
    title: '微信用户', key: 'email', width: 1, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return row.openid ? row.openid : '未绑定'
    }
  },
  {
    title: '注册时间', key: 'createdAt', width: 2, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return dayjs(row.createdAt).format('YYYY-MM-DD')
    }
  },
  {
    title: '操作', key: 'actions', width: 2, align: 'center',
    render(row: any) {
      return [
        h(NButton, {
          round: true,
          secondary: true,
          size: 'tiny',
          type: "error",
          onClick: () => handleRemove(row)
        }, {default: () => "删除"}),
      ]
    }
  }
])
const andParams = ref({})
const orParams = ref({})
const orderParams = ref({})

onMounted(() => {
  handleSearch()
})
const handleSearch = () => {
  const searchValue = `%${keyword.value}%`;
  orParams.value = {
    id: searchValue,
    username: searchValue,
    email: searchValue,
    
  }
  nextTick(() => {
    tableRef.value.doQuery()
  })
}


const handleRemove = (row: any) => {
  console.log(row)
  window.$message.info('暂不支持删除用户')
  // window.$dialog.warning({
  //   title: '提醒',
  //   content: '确定删除该分类？',
  //   positiveText: '确定',
  //   negativeText: '取消',
  //   onPositiveClick: () => {
  //     api.category.remove({id: row.id}).then(res => {
  //       if (res.data.code === 0) {
  //         window.$message.success('删除成功')
  //         handleSearch()
  //       }
  //     })
  //   }
  // })
}
</script>

<style scoped>

</style>